/******** Default HML font size as 16px; 1rem = 16px **********/
html {
  font-size: 16px;
  background: #ecedee;
}

.text-center{
  text-align: center !important;
}

/***************** End text and fonts  *********************/
body {
  font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5rem;
  margin: 0;
  color: #333;
}


h1 {
  font-family: inherit;
  font-weight: 700;
  font-style: inherit;
  font-size: 1.8rem;
  line-height: 2.8rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

h2 {
  font-family: inherit;
  font-weight: bold;
  font-style: inherit;
  font-size: 1.3rem;
  line-height: 1.45em;
  margin-top: 0;
  margin-bottom: .5rem;
  color: #333;
}

h3 {
  font-family: inherit;
  font-weight: bold;
  font-style: inherit;
  font-size: 1.5rem;
  line-height: 1.45em;
  margin-top: .5rem;
  margin-bottom: 0rem;
  color: #333;
}

h4 {
  font-family: inherit;
  font-weight: bold;
  font-style: inherit;
  font-size: 1.125rem;
  line-height: 1.45em;
  margin-top: 0;
  margin-bottom: .5rem;
  color: #333;
}

h5 {
  font-family: inherit;
  font-weight: bold;
  font-style: inherit;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0px;
  color: #333;
}

p {
  margin: 0 0 1rem 0;
}

.icon-revenue-logo {
  border-right: 1px solid;
  font-size: 4rem;
  padding-right: 30px;
  margin-right: 30px;
}

.application-name {
  color: #FFF;
  margin-left: 0;
  display: inline-block;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0;
}

.rem1 {
  font-size: 1rem;
}

.rem1-5 {
  font-size: 1.5rem;
}

.rem2 {
  font-size: 2rem;
  line-height: 2rem;
}

.normal {
  font-weight: 400;
}

.semiBold {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.mono {
  font-family: Fira Mono;
}

.line-height-2half {
  line-height: 2.5rem;
}

.grey-background {
  background-color: #ECEDEE;
  width: 100%;
  float: left;
  padding: 5px 10px 10px 10px;
  /* margin-bottom: 20px; */
}

/***************** End text and fonts  *********************/


/***************** Colours  *********************/
.rev-green {
  background-color: #025e63;
}

.lightGreen {
  background-color: #00c6c6;
}

.text-colour {
  background-color: #333;
}

.grey {
  background-color: #ecedee;
}

.blue-link {
  background-color: #0c72bc;
}

.primary-blue {
  background-color: #0673e8;
}

.error-red {
  background-color: #ff5655;
}

.lightGreen-text {
  color: #00c6c6;
}

/***************** End colours  *********************/


/***************** Inputs and labels  *********************/
label {
  font-size: 1.15rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.sublabel {
  margin-left: 4px;
  margin-bottom: .5rem;
}

.field-date {
  padding: 0px;
}

.field-date label {
  margin: 0;
}

.field-date .form-control {
  text-align: center;
}

.field-date .help-block {
  margin-top: 14px;
}

.field-date--label {
  font-size: 1.28571429rem;
}

.field-date .form-control {
  text-align: center;
}

.field-date-day,
.field-date-month,
.field-date-year {
  padding: 0;
  width: 29%;
  padding-left: 4px;
}

.field-date-day,
.field-date-month {
  margin-right: 14px;
}

.label:empty {
  display: block;
}

.checkbox {
  margin: 0px;
  display: inline-block;
}

.checkbox input[type=checkbox] {
  width: 2em;
  margin: -10px 0 0 0;
  padding: 0;
  font-size: 1em;
  opacity: 0;
  filter: alpha(opacity=0);
  /* For IE8 and earlier */
}

.checkbox label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-right: 1rem;
  line-height: 32px;
}

.checkbox label:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  top: 0;
  left: 5px;
  position: absolute;
  background-color: #fff;
  border: 2px solid #000;
}

.checkbox input[type=checkbox]:checked~label:before {
  font-family: "MyRevenue";
  content: "\e601";
  background: #0c72bc;
  border: 0;
  color: #fff;
  padding-top: .5rem;
  font-size: 1rem;
  text-align: center;
  line-height: 1rem;
}

.checkbox input[type=checkbox]:disabled~label:before {
  background: #ecedee;
  color: #ecedee;
  cursor: not-allowed;
}

.checkbox input[type=checkbox]:checked:disabled~label:before {
    font-family: "MyRevenue";
    content: "\e601";
    background: #7caacc;
    border: 0;
    color: #ecedee;
    padding-top: .5rem;
  }

.checkbox input[type=checkbox]:focus~label:before {
  border: 3px #00c6c6 solid;
  width: 30px;
  height: 30px;
}

.checkbox>label {
  padding-left: 25px;
}

/***************** End Inputs and labels  *********************/


/***************** Checkbox list  *********************/
.line-height-2half {
  line-height: 2.5rem;
}

.checkbox-list-item {
  width: 100%;
  background-color: #fff;
  padding: 1rem .5rem;
  float: left;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  margin-bottom: 1rem;
}

.checkbox-list-item:last-child {
  margin-bottom: 0;
}

.checkbox-list-item:hover {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}

/***************** End checkbox list  *********************/



/***************** Item list  *********************/
.itemContainer {
  width: 100%;
  margin-bottom: .5rem;
  background-color: #fff;
  padding: 5px;
  float: left;
  border-left: 5px solid #24C1E9;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  margin-bottom: .5rem;
}

.itemContainer:last-child {
  margin-bottom: 0;
}

.itemContainer:hover {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}

.list-section .labels .item {
  word-break: normal;
  word-wrap: normal;
  line-height: 1.2rem;
}

.item-list-container {
  float: left;
  width: 100%;
  margin-bottom: 2rem;
}

.item-list-container .item {
  float: left;
  padding: 5px;
  width: 20%;
  font-size: .9rem;
  word-break: break-word;
  word-wrap: break-word;
}

.item-list-container .labels {
  font-weight: bold;
  padding: .5rem 20px .5rem 25px;
  width: 100%;
  float: left;
}

#groupedList .labels {
  padding-top: 0;
}

.item-list-container .item.longField {
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-list-container .item.longField:hover {
  white-space: initial;
  white-space: normal;
}

.mobile-label {
  position: absolute;
  left: -1000rem;
}

@media screen and (max-width: 992px) {
  .item-list-container .subGroup {
    float: left;
    width: 100%;
  }

  .mobile-label {
    position: relative;
    left: 0;
  }

  .item-list-container .mobile-label {
    float: left;
    font-weight: bold;
    width: 50%;
    padding: 3px;
  }

  .item-list-container .item {
    width: 50% !important;
  }

  .item-list-container .action.text-right {
    text-align: left;
  }

  .item-list-container .labels {
    display: none;
  }
}

/***************** End item list  *********************/



/******************* Icons *********************/
/* myAccount icons */
@font-face {
  font-family: "MyRevenue";
  src: url("../fonts/MyRevenue.eot");
  src: url("../fonts/MyRevenue.eot?#iefix") format("embedded-opentype"), url("../fonts/MyRevenue.woff") format("woff"), url("../fonts/MyRevenue.ttf") format("truetype"), url("../fonts/MyRevenue.svg#MyRevenue") format("svg");
}

[class^="myAcc-icon-"],
[class*=" myAcc-icon-"] {
  display: inline-block;
  font-family: "MyRevenue";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myAcc-icon-fill_form:before {
  content: "\e60e";
}

.myAcc-icon-back:before {
  content: "\e600";
}

.myAcc-icon-checkbox_selected:before {
  content: "\e601";
}

.myAcc-icon-error:before {
  content: "\e602";
}

.myAcc-icon-help_expanded:before {
  margin-left: -8px;
  content: "\e603";
}

.myAcc-icon-help:before {
  padding-right: 8px;
  content: "\e604";
}

.icon-help-left:before {
  padding-right: 8px;
  padding-left: 8px;
  content: "\e604";
  display: inline-block;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.myAcc-icon-lock:before {
  content: "\e605";
}

.myAcc-icon-next:before {
  content: "\e606";
}

.myAcc-icon-pw_strong:before {
  content: "\e607";
}

.myAcc-icon-pw_weak:before {
  content: "\e608";
}

.myAcc-icon-radio_selected.path1:before {
  content: "\e609";
  color: #000000;
}

.myAcc-icon-radio_selected.path2:before {
  content: "\e60a";
  color: #ffffff;
}

.myAcc-icon-radio_unselected:before {
  content: "\e60b";
}

.myAcc-icon-success:before {
  content: "\e60c";
}

.myAcc-icon-user:before {
  content: "\e60d";
}

.myAcc-info-icon-image {
  max-width: 1.2rem;
  max-height: 1.2rem;
  margin: 0 .2rem .2rem 0;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}


/* Revenue icons and arrows */
@font-face {
  font-family: 'revenue_icons';
  src: url('../fonts/revenue_icons.eot?7bs9g5');
  src: url('../fonts/revenue_icons.eot?7bs9g5#iefix') format('embedded-opentype'), url('../fonts/revenue_icons.ttf?7bs9g5') format('truetype'), url('../fonts/revenue_icons.woff?7bs9g5') format('woff'), url('../fonts/revenue_icons.svg?7bs9g5#revenue_icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'revenue_icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-diagonal-bold:before {
  content: "\e900";
}

.icon-arrow-diagonal-regular:before {
  content: "\e901";
}

.icon-arrow-down-bold:before {
  content: "\e902";
}

.icon-arrow-down-regular:before {
  content: "\e903";
}

.icon-arrow-left-bold:before {
  content: "\e904";
}

.icon-arrow-left-regular:before {
  content: "\e905";
}

.icon-arrow-right-bold:before {
  content: "\e906";
}

.icon-arrow-right-regular:before {
  content: "\e907";
}

.icon-arrow-up-bold:before {
  content: "\e908";
}

.icon-arrow-up-regular:before {
  content: "\e909";
}

.icon-attachment-csv:before {
  content: "\e90a";
}

.icon-attachment-excel:before {
  content: "\e90b";
}

.icon-attachment-pdf:before {
  content: "\e90c";
}

.icon-attachment-txt:before {
  content: "\e90d";
}

.icon-attachment-word:before {
  content: "\e90e";
}

.icon-attachment-xml:before {
  content: "\e90f";
}

.icon-expando-close:before {
  content: "\e910";
}

.icon-expando-open:before {
  content: "\e911";
}

.rev.icon-expando-closed:before {
  content: "\e911";
}

.rev.icon-expando-opened:before {
  content: "\e910";
}

.icon-feedback:before {
  content: "\e912";
}

.icon-print:before {
  content: "\e913";
}

.icon-revenue-logo:before {
  content: "\e914";
}

.icon-search:before {
  content: "\e915";
}

.icon-arrow-down-bold:before {
  content: "\e906";
}

/******************* End Icons *********************/


/**************** form content *********************/

* form content */ .form-content {
  /*
  border: 2px solid #ecedee;
  padding: 15px;
*/
  margin: 1rem 0;
  position: relative;
}

.form-buttons {
  float: left;
}

.form-group {
  float: left;
  width: 100%;
  margin-bottom: 0;
  clear: both;
}

.form-group label {
  font-weight: 500
}

.form-header {
  margin: 2rem 0 0;
}

.form-header h3 {
  margin-bottom: 1rem;
}

.output-text {
  margin-left: 5px;
}


/**************** End form content *********************/


/*************** buttons ********************/

button {
  font-family: 'Fira Sans';
}

.btn-primary {
  color: #ffffff;
  background-color: #0c72bc;
  border-color: transparent;
  border-bottom: 4px solid #0a4977;
  outline: none;
  font-weight: bold;
  letter-spacing: .5px;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 3px;
  padding: .825rem 1rem;
  margin-top: 1rem;
  text-decoration: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #0c72bc;
  border-color: transparent;
}

.btn-white:hover,
.btn-white:focus,
.btn-white.focus,
.btn-white:active,
.btn-white.active {
  color: #0c72bc;
  background-color: #ecedee;

}

.btn-white {
  border-bottom: 4px solid #0a4977;
  color: #0c72bc;
  background-color: #fff;
}

.fieldset {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-top: 1rem;
  position: relative;
  margin-bottom: 1rem;
  float: left;
  width: 100%;
  padding-top: 2rem;
}

.legend {
  position: absolute;
  top: -1.2rem;
  background-color: #fff;
  display: inline-block;
  width: initial;
  padding: 0 15px;
  color: #025e63;
}

.btn-primary:hover {
  background: #0673e8;
  border-color: transparent;
  border-bottom: 4px solid #0a4977;
}

.btn-primary:hover:active {
  background: #0a4977;
  outline: none;
}

.btn-secondary {
  color: #0d73bd;
  text-decoration: none;
  font-size: 1.15rem;
  border-bottom: 1px solid;
}

.btn-secondary:hover {
  border: #fff;
  text-decoration: none;
  color: #0090ec;
}

/*************** End buttons ********************/


/******************* link styles *******************/

a {
  text-decoration: underline;
  color: #0c72bc;
  font-size: 15px;
}

a:hover {
  color: #0c72bc;
  text-decoration: none;
}

a:active {
  color: #0a4977;
}

.header a {
  color: #fff
}


/* all links to have a focus border for tabbing */

a:focus,
input:focus,
select:focus,
button:focus {
  outline: #00c6c6 solid 3px;
}

.external-link {
  white-space: nowrap;
  color: #0c72bc;
}

.external-link:hover {
  color: #0090ec;
}

.external-link::after {
    content: "\2197";
}

a:focus {
  text-decoration: none;
}

.navigation-link {
  padding: .3rem;
  margin: -.3rem;
  display: inline-block;
  text-decoration: none;
}

.navigation-link:focus {
  text-decoration: none;
}

.navigation-link span.icon-arrow-left-bold {
  margin-right: 5px;
  display: inline-block;
}

a.navigation-link {
  text-decoration: none;
}

/******************* end link styles *******************/


.header {
  background-color: #025e63;
  color: #fff;
  padding: 1rem 0;
  border-bottom: 14px solid #00c6c6;
}

.preheader {
  background-color: #073236;
  color: #fff;
  padding: .5rem 0;
  line-height: 1rem;
}

.preheader a {
  color: #fff;
  text-decoration: underline;
  display: inline-block;
}

.preheader a:hover,
.preheader a:active,
.preheader a:focus {
  color: #fff;
  text-decoration: none;
}


/********** Footer **********/
.footer {
  border-top: 14px solid #00c6c6;
  background: #ecedee;
  padding-bottom: 14px;
  padding-left: 14px;
}

.footer .footer-nav {
  padding-left: 0px;
  padding-top: 32px;
  margin-bottom: 14px;
  font-size:16px;
}

.footer .footer-nav li {
  list-style: none;
  display: inline;

}

ul.footer-nav {
  padding: 0;
}

.footer .footer-nav li a{
  font-size: 1rem;
  color: #333333;
  text-decoration: underline;
  margin-bottom: .5rem;
  display: inline-block;
}

.footer .footer-nav li p{
  font-size: 1rem;
  color: #333333;
  text-decoration: none;
  margin-bottom: .5rem;
  display: inline-block;
}

.footer .footer-nav li a:hover {
  color: #000;
   text-decoration: none;
}

.footer .footer-nav li span {
  padding: 0px 10px;
  color: #00c6c6;
  text-decoration: none;
}

.footer .footer-logo {
  margin-top: 14px;
  margin-left: 48px;
  width: 175px;
}

.footer .language-switch{
	font-size:16px;
}

#logout-button {
  padding: 5px 15px;
  border-radius: 15px;
  background: #0B4D51;
}

#logout-button:hover {
  background: #00c6c6;
}


.employer-details {
  padding: 5px 0;
}

.header-action {
  padding: 5px 15px;
}

#logout-button {
  color: white;
  padding: 5px 10px;
  text-decoration: underline;
}

#logout-button:hover {
  color: white;
  padding: 5px 10px;
  text-decoration: none;
}

.clickable-tile {
  background-color: white;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}

.clickable-tile:hover,
.clickable-tile:active {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
}

/******************* basic colours *******************/

.light-grey-background {
  background-color: #ECEDEE;
}

.dark-grey-background {
  background-color: #DCDDDE;
}


/******************* end basic colours *******************/

img.system-error {
  max-width: 10rem;
  margin: 1rem 0;
}


/******************* coloured bullets *******************/

ul.revenue-bullets li {
  list-style: none;
}

ul.revenue-bullets {
  margin: .5rem 0;
}

ul.revenue-bullets li::before {
  content: "●";
  margin-left: -1.3rem;
  padding-right: 0.7rem;
  color: rgb(0, 153, 153);
}

/******************* end coloured bullets *******************/


/******************* tick bullets *******************/
ul.tick-bullets {
  margin: .5rem 0;
}

ul.tick-bullets li {
  list-style: none;
  padding: .5rem 0;
}

.tick-bullets .myAcc-icon-pw_strong {
  font-size: 18px;
  position: absolute;
  left: 18px;
  color: #00c6c6;
}

/******************* tick bullets *******************/


/******************* yellow bullets *******************/
ul.yellow-bullets {
  margin: .5rem 0;
}

ul.yellow-bullets li {
  list-style: none;
  padding: .5rem 0;
}

.yellow-circle {
  color: #333;
  background: #eeb22e;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  font-size: 15px;
  position: absolute;
  left: 18px;
  text-indent: 9px;
  margin-right: 10px;
  line-height: 24px;
  font-weight: 500;
}

/******************* yellow bullets *******************/


/******************* white bullets *******************/
ul.white-bullets {
  margin: .5rem 0;
  padding-left: 0;
  float: left;
  width: 100%;
}

ul.white-bullets li {
  list-style: none;
  padding: .5rem 0;
  float: left;
  width: 100%;
}

.step-icon {
  float: left;
  border: 3px solid;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  text-indent: 17px;
  line-height: 40px;
  font-weight: 500;
}

.step-info {
  float: left;
  padding-left: 15px;
  width: calc(100% - 50px);
}

/******************* white bullets *******************/


/****************** table styles ********************************/

table tr td {
  padding: .5rem;
}

table tbody tr:nth-child(odd) {
  background-color: #e2e3e4;
}

table thead tr,
table tbody tr:nth-child(even) {
  background-color: #f5f4f4;
}

table thead {
  border-bottom: 2px solid #595959;
  font-weight: bold;

}

table {
  font-size: .875rem;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}


/****************** end table styles ********************************/


/**************** input *********************************/

select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="time"],
input[type="week"],
input[type="month"],
input[type="search"] {
  font-family: 'Fira Mono', monospace;
  color: #333;
  padding-left: .5rem;
}

.input-group {}

.input-group-field {
  height: 3.125rem;
  box-shadow: none;
  border: 2px solid #666;
  border-right: 0;
  font-size: 1.125rem;
}

.input-group-button {}

.search .input-group {
  width: 20rem;
  position: absolute;
  right: 0;
  top: 5rem;
  margin-right: 2rem;
}

.search .input-group-field {
  height: 3.125rem;
  border: none;
  width: 14.5rem;
  position: absolute;
  left: 0;
}

.search .input-group-button {
  position: absolute;
  right: 0;
}

.search .input-group-button .btn-primary {
  padding: .5rem 0 0;
  width: 5rem;
  border-radius: 0;
}

.status-container {
  border: 4px solid transparent;
  position: relative;
  max-width: 300px;
}

.status-container.status-error {
	border-color: #ff5655;
}

.status-active {
  border-color: #00c6c6;
}

.status-error {
  border-color: #ff5655;
   font-weight: bold;
    color: #ff5655;
}

fieldset {
  margin-bottom: 1rem;
}

.form-control {
  max-width: 300px;
  height: 42px;
  border: 2px solid #333333;
  color: #333;
  border-radius: 1px;
  font-family: "Fira Mono", Courier, Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  box-shadow: 0 0 0 4px #00c6c6;
  border-radius: 0;
}

.form-control:focus {
  border-color: #000;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.field-label {
  margin-left: 5px;
  font-weight: 700;
}

.btn:focus,
.btn:active {
  outline: #00c6c6 solid 3px;
}

.info-text {
  margin: 5px 5px 10px;
  display: none;
}

.radio-btn:last-child {
  margin-bottom: 0;
}

.radio-btn {
  display: block;
  padding: 0;
  margin-bottom: .5rem;
}

.radio-btn input[type=radio] {
  display: block;
  padding: 0;
  font-size: 1em;
  opacity: 0;
  position: absolute;
}

.radio-btn label {
  margin: 0;
}

.radio-btn label {
  display: inline-block;
  cursor: pointer;
  background: #ecedee;
  position: relative;
  padding: .5rem 1.5rem .5rem 2.5rem;
  line-height: 2rem;
  font-size: 1rem;
  font-weight: 400;
}

.radio-label {
  width: 280px;
}

.radio-btn label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  top: 1rem;
  left: 1rem;
  position: absolute;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 100%;
}

.radio-float-left {
  float: left;
  padding: 0px 7px 14px 14px;
}

.radio-btn input[type=radio]:focus+label {
  box-shadow: 0 0 0 4px #00c6c6;
}

.radio-btn input[type=radio]:checked+label:before {
  background: url("../img/radio_selected.png") no-repeat center;
  border: 0px;
  color: #fff;
  font-size: 22px;
  background-size: contain;
  text-align: center;
  line-height: 18px;
}

.input-group {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
}

.input-group-addon {
  color: #000;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0px;
  font-size: 1rem;
}

textarea {
  white-space: initial;
  min-height: 7rem;
}

legend {
  border: none;
  font-size: 1.15rem;
  font-weight: bold;
  margin: .5rem 0 1rem;
}

/**************** end input *********************************/

fieldset .radio-btn {
  margin-bottom: .5rem;
}

fieldset .radio-btn:last-child {
  margin: .5rem 0 1rem 0;
}

.radio-btn input[type=radio]:checked~.radiobox {
  border: 1px solid #000;
}

#upload {
  display: none
}

/* Gray Background */

#gray-bkg,
.gray-bkg {
  background: #ecedee;
}

/* Alert */

.alert {
  background: #00c6c6;
  border: none;
  color: #333;
  border-radius: 0;
}

.alert .alert-container {
  width: 75%;
  margin: auto;
}

@media screen and (max-width: 1200px) {
  .alert .alert-container {
    width: 100%;
  }
}

.alert .alert-container .close {
  top: -8px;
  font-size: 42px;
  font-size: 3rem;
  opacity: 1;
}

.alert .alert-container ul {
  padding: 0;
}

.alert .alert-container ul li {
  list-style: none;
  font-size: 22px;
  font-size: 1.57142857rem;
}

.alert .alert-container ul li a {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
}

/* Modals */

.modal-content {
  border-radius: 0;
  padding: 1rem 15px;
}

.modal-title {
  color: #025e63;
}

.modal-body h4 {
  padding-bottom: 1rem;
}

.modal-content .modal-header {
  border-bottom: none !important;
  padding: .5rem 15px;
}

.modal-content .modal-header .close {
  position: relative;
  background: #b0b0b0;
  border-radius: 100%;
  display: block;
  color: #fff;
  font-size: 38px;
  line-height: 22px;
  left: -10px;
  opacity: 1;
  filter: alpha(opacity=100);
}

.modal-content .modal-header .close img {
  height: 40px !important;
  width: 40px !important;
}

.modal-content .modal-body {
  padding: .5rem 15px;
  border-bottom: none;
}

.modal-content .modal-body p {
  font-size: 1rem;
  margin: 0;
  padding: .5rem 0;
}

.modal-content .modal-footer {
  border-top: none;
  padding: .5rem 15px;
  margin-top: 0;
}

.modal-content .modal-footer .btn-primary {
  margin-top: 1rem;
}

.modal-content .modal-footer .underline {
  margin-left: 22px;
}

@media only screen and (max-width: 480px) {}

/* Validation */

.validation-error-icon {
  width: 30px;
  height: 24px;
  position: absolute;
  left: -30px;
  margin-top: 12px;
  background: url("../img/error.png") no-repeat center;
  background-size: contain;
}

.validation-error-icon-extended {
  width: 34px;
  height: 24px;
  position: absolute;
  left: -40px;
  margin-top: 12px;
  background: url("../images/error.png") no-repeat center;
  background-size: contain;
}

.status-message.status-error {
  color: #ff5655;
  font-weight: bold;
}

@media screen and (max-width: 992px) {
  .validation-error-icon {
    width: 22px;
    height: 17px;
    left: -18px;
    margin-top: 16px;
  }
}

.review-validation-content {
  padding: 90px;
  padding-bottom: 0px;
  text-align: center;
}


/* Error */

.error {
  color: #ff5655;
  font-weight: bold !important;
}

.status-message.status-error {
  color: #ff5655;
}

.status-message.status-weak {
  color: #fbb816;
}

.status-message.status-medium {
  color: #25a7a7;
}

.status-message.status-strong {
  color: #025e63;
}

.status-message {
	display: none;
	font-size: 18px;
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	padding: 0px;
	margin-top: .5em;
}

.status-message.visible {
  display: block;
}

.status-message.without-label {
  margin-top: 0;
}


/* Accessibility */

.outline-accesibility-tab:focus,
.outline-accesibility-tab-img:focus img {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px
}

.open .outline-accesibility-tab:focus {
  outline: 0;
}

.outline-accesibility-tab-img-black:focus img {
  outline: 1px dotted black;
}

.outline-accesibility-tab-img-white:focus img {
  outline: thin dotted white;
  outline-offset: 5px
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.tabHalfWidth {
  width: 50%
}

/**************** datepicker *********************/

.calendar-container {
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
}

.calendar-container img.calendar-icon {
  position: relative;
  top: .6rem;
  right: 30px;
  pointer-events: none;
}

.ui-widget.ui-widget-content {
  min-width: 300px;
  border-color: #333;
  border: 1px solid;
  border-radius: 0;
}

.ui-datepicker .ui-datepicker-header {
  border-radius: 0;
  border: none;
}

.ui-datepicker table tr td {
  padding: .5rem;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font-weight: bold;
}

table.ui-datepicker-calendar thead {
  border: none;
}

.ui-datepicker .ui-datepicker-header {
  border-radius: 0;
  border: none;
}

table thead tr,
table tbody tr:nth-child(even) {
  background-color: #fff;
}

table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #fff;
  font-weight: normal;
  color: #333;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #333;
  background: rgba(0, 153, 153, .1);
  color: #333;
}

.ui-state-highlight:focus,
.ui-widget-content .ui-state-highlight:focus,
.ui-widget-header .ui-state-highlight:focus {
  outline: none;
}

ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #333;
  background: #0090ec;
  color: #fff;
  font-weight: bold;
}

table.ui-datepicker-calendar thead {
  border: none;
}

.ui-widget.ui-widget-content {
  min-width: 300px;
  border-color: #333;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-top: 0;
  border-radius: 0;
}

/**************** End datepicker *********************/


/**************** drag and drop *********************/
#dragAndDropArea {
  position: relative;
  max-width: 500px;
  border: 2px dashed #ddd;
  margin-bottom: 1rem;
}

#dragAndDropArea.dragOver {
  border: 2px dashed #00c6c6 !important;
  background-color: #f9f9f9;
}

.textArea {
  position: absolute;
  padding: 15px 30px;
  text-align: center;.
  width: 90%;
  left: 5%;
  height: 90%;
  top: 5%;
}

#uploadContentId {
  width: 100%;
  height: 100px;
  z-index: 100;
  opacity: 0;
}

.file {
	width: 400px;
	height: 50px;
	background: #171717;
	padding: 4px;
	border: 1px dashed #333;
	position: relative;
	cursor: pointer;
}
.file::before {
	content: '';
	position: absolute;
	background: #fff;
	font-size: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

.file::after {

	position: absolute;
	color: #808080;
	font-size: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dragFiles {
  font-weight: bold;
  margin-bottom: .5rem;
  display: block;
}

.broweFiles {
  color: #0c72bc;
  font-weight: 500;
  border-bottom: 1px solid;
  display: inline-block;
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 2px;
}


#uploadError,
#uploadFormatError {
  display: none;
  margin: .5rem 0;
}

#uploadError.status-error,
#uploadFormatError.status-error {
  display: block;
}

/* Selected files list */
#uploadedFiles {
  float: left;
  width: 100%;
  max-width: 500px;
  margin-bottom: 1rem;
}

#uploadedFiles .labels {
  font-weight: bold;
  font-weight: bold;
  float: left;
  width: 100%;
  background-color: #ecedee;
  border-bottom: 1px solid #9f9f9f;
}

#uploadedFiles .item {
  float: left;
  word-break: break-word;
  padding: .7rem 10px;
}

#uploadedFiles .fileName {
  width: 50%;
}

#uploadedFiles .fileSize {
  width: 20%;
}

#uploadedFiles .action {
  width: 30%;
  text-align: right;
}

#uploadedFiles .selectedFiles {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

#uploadedFiles .selectedFiles:nth-of-type(even) {
  background-color: #fff;
}

#uploadedFiles .selectedFiles:nth-of-type(odd) {
  background-color: #f9f9f9;
}

/**************** end drag and drop *********************/

/**************** review list *********************/
.grouping-container {
  border: 1px solid #ccc;
  padding: 0 1rem;
  margin: 2.5rem 0rem 0rem 0rem;
  float: left;
  width: 100%;
}

.review-heading {
  display: inline-block;
}

.grouping-list {
  font-weight: 500;
  margin: 1rem 0 2rem;
  list-style: none;
  padding: 0;
}

.grouping-list li.striped-list {
  padding: 1rem;
}

.grouping-list li.striped-list:nth-of-type(even) {
  background-color: #fff;
}

.grouping-list li.striped-list:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.grouping-heading h3 {
  background-color: #fff;
  display: inline-block;
  padding: 15px;
  margin: 0;
  margin-top: -2rem;
  float: left;
  font-size: 1.3rem;
}

/**************** end review list *********************/


/**************** collapsible list *********************/
.grey-panel-shadow {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
  background-color: #ecedee;
  padding: 15px;
  float: left;
  width: 100%;
  margin-top: .5rem;
  margin-bottom: 2rem;
}

.white-panel {
  width: 100%;
  background-color: #fff;
  padding: 15px;
  float: left;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  margin-bottom: 1rem;
}

.list-heading {
  display: inline-block;
  font-size: 1.1rem;
}

.list-container a {
  color: #333;
  text-decoration: none;
  font-size: 1.2rem;
}

.list-section {
  float: left;
  width: 100%;
  margin-top: 1rem;
}

.list-toggle {
  display: inline-block;
}

.list-item {
  width: 100%;
  background-color: #fff;
  padding: 1rem .5rem;
  float: left;
  border-left: 5px solid #24C1E9;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  margin-bottom: .5rem;
}

.list-item:hover {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
}

#summary {
  min-height: 10rem;
}

@media screen and (max-width: 600px) {
  .col-xxs-12 {
    float: left;
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

/**************** end collapsible list *********************/


/**************** loading panels *********************/
@keyframes placeHolderShimmer {
  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }
}

.placeholderContainer {
  margin: 0 auto;
  width: 100%;
  margin-top: 1rem;
}

.animated-background-panel {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #fff;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 700px;
  position: relative;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.background-masker {
  background: #fff;
  position: absolute;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}

.animated-background-panel .background-masker.first {
  left: 15px;
  top: 15px;
  height: 150px;
  width: calc(50% - 30px);
}

.animated-background-panel .background-masker.second {
  top: 15px;
  width: calc(50% - 30px);
  right: 15px;
  height: 670px;
}

.animated-background-panel .background-masker.third {
  left: 15px;
  top: 180px;
  height: 370px;
  width: calc(50% - 30px);
}

.animated-background-panel .background-masker.fourth {
  top: 565px;
  left: 15px;
  width: calc(50% - 30px);
  height: 120px;
}

.placeholderContainer-list {
  margin: 0 auto;
  width: 100%;
  margin-top: 1rem;
}

.animated-background-list {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #fff;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 160px;
  position: relative;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.animated-background-list .background-masker.first {
  left: 15px;
  top: 15px;
  height: 38px;
  width: calc(100% - 30px);
}

.animated-background-list .background-masker.second {
  top: 60px;
  width: calc(100% - 30px);
  left: 15px;
  height: 38px;
}

.animated-background-list .background-masker.third {
  left: 15px;
  top: 105px;
  height: 38px;
  width: calc(100% - 30px);
}

/**************** end loading panels *********************/


/**************** landing page *********************/
.landing-link {
  margin-top: 2rem;
}

h2.expense-detail-title {
  color: #068288;
  margin-top: 1rem;
}

h2.expense-detail-title.white {
  color: #fff;
}

.landing-button-first {
  margin: 0 0 1rem 0;
}

.grey-bkg {
  color: #333;
  background: #ecedee;
  padding: 15px;
}

.blue-bkg {
  color: #fff;
  background: #0c72bc;
  padding: 15px;
}

.btn-white:hover,
.btn-white:focus,
.btn-white.focus,
.btn-white:active,
.btn-white.active {
  color: #0c72bc;
  background-color: #ecedee;

}

.btn-white {
  border-bottom: 4px solid #0a4977;
  color: #0c72bc;
  background-color: #fff;
}

.mandatoryasterisk {
	color: #FD6757;
}

/**************** end landing page *********************/